<!--
 * @Author: your name
 * @Date: 2022-03-02 23:38:25
 * @LastEditTime: 2022-04-09 14:56:17
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \blog_web\src\views\home\main\Main.vue
-->
<template>
  <div class="main">
    <el-row class="main-container" type="flex" justify="space-between">
      <!-- 左边部分 -->
      <el-col :span="14">
        <keep-alive>
          <transition
            name=""
            enter-active-class="animate__animated animate__backInLeft"
          >
            <router-view />
          </transition>
        </keep-alive>
      </el-col>
      <!-- 右边部分 -->
      <el-col :span="8" class="right-main">
        <!-- 个人介绍 -->
        <el-card class="box-card introduce">
          <!-- 头像 -->
          <div class="img"><img :src="user.avatar" alt="" /></div>

          <!-- 用户的名称 -->
          <p>用户名:{{ user.username }}</p>
          <!-- 登录时间 -->
          <!-- <p>登录时间:{{ $moment().format("YYYY-MM-DD HH:mm:ss") }}</p> -->
          <!-- 个人备注 -->
          <span>个人备注:{{ user.remark }}</span>
        </el-card>
        <!-- 文章分类 -->
        <el-card class="box-card system">
          <div class="describe">网站统计:</div>
          <div>
            <el-col :span="12"
              ><el-tag>访问数量:{{ userTotal }}</el-tag></el-col
            >
            <el-col :span="12"
              ><el-tag type="success">博文数:{{ blogTotal }}</el-tag></el-col
            >
            <el-col :span="12"
              ><el-tag type="info">标签数:{{ labelTotal }}</el-tag></el-col
            >
            <el-col :span="12"
              ><el-tag type="warning">留言数:{{ messageTotal }}</el-tag></el-col
            >
            <el-col :span="12"
              ><el-tag type="warning">网站运行时间:{{ time }}</el-tag></el-col
            >
          </div>
        </el-card>
        <!-- 推荐阅读或者广告 -->
        <el-card class="box-card one-word">
          <div class="describe">每日一言:</div>
          <div class="article">{{ zaoan }}</div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// 导入处理时间的
import { longTime } from '@/util/time.js'
// 导入请求早安心语的接口
import { getMorning } from '@/api/third.js'
// 导入获取总数的接口
import {
  getUserTotal,
  getBlogTotal,
  getLabelTotal,
  getMessageTotal
} from '@/api/home.js'
export default {
  name: 'Main',
  data() {
    return {
      zaoan: '',
      userTotal: 0,
      blogTotal: 0,
      labelTotal: 0,
      messageTotal: 0,
      timer: '',
      time: ''
    }
  },
  props: {
    user: {
      type: Object,
      default: {}
    }
  },
  created() {
    // 获取早安心语
    getMorning().then((res) => {
      // console.log("早安心语:", res);
      if (res.data.code == 200) {
        this.zaoan = res.data.newslist[0].content
      }
    })
    // 获取用户的总数
    getUserTotal().then((res) => {
      console.log('res', res)
      if (res.code == 200) {
        this.userTotal = res.result.total
        // console.log("==========", this.categoryOption.series[0].data[0]);
        // this.$set(this.categoryOption.series[0].data, 0, this.userTotal);
      }
    })
    // 获取博文的总数
    getBlogTotal().then((res) => {
      console.log('res', res)
      if (res.code == 200) {
        this.blogTotal = res.result.total
      }
    })
    // 获取标签的总数
    getLabelTotal().then((res) => {
      console.log('res1', res)
      if (res.code == 200) {
        this.labelTotal = res.result.total
      }
    })
    // 获取消息的总数
    getMessageTotal().then((res) => {
      console.log('res', res)
      if (res.code == 200) {
        this.messageTotal = res.result.total
      }
    })
  },
  mounted() {
    this.timer = setInterval(() => {
      this.time = longTime()
    }, 1000)
  },
  destroyed() {
    clearInterval(this.timer)
  }
}
</script>
<style lang="scss" scoped>
.main {
  width: 100%;
  margin-top: 80px;
  margin-bottom: 150px;
  .main-container {
    width: 1240px;
    height: 2000px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    .left {
      width: 100px;
    }
    .right-main {
      .box-card {
        // height: 300px;
        margin-bottom: 20px;
      }
      .introduce {
        .img {
          width: 100px;
          height: 100px;
          margin: 0 auto;
          img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }
      }
      .system {
        height: 220px;
        .describe {
          font-size: 18px;
          font-weight: bold;
          color: red;
          margin-bottom: 20px;
        }
        .el-tag {
          margin-bottom: 20px;
        }
      }
      .one-word {
        .describe {
          font-size: 18px;
          font-weight: bold;
          color: red;
          margin-bottom: 6px;
        }
        .article {
          text-indent: 2em;
          line-height: 2;
        }
      }
    }
  }
}
</style>
